// 获取商品信息
function getProductMesg(pageNo) {
    $.ajax({
        type: 'get',
        url: " http://www.xiongmaoyouxuan.com/api/column/3183/items?start=0",
        data: {
            start: pageNo * 20
        },
        success: function (result) {
            if (result.code === 200) {
                let itemList = result.data.list
                showProductMesg(itemList)
            }
        }
    })
}

// 将商品信息渲染到页面
function showProductMesg(goodsList) {
    // list = [...list, ...goodsList]
    // 去掉多余数据
    let num = goodsList.length % 4
    if (num != 0) {
        goodsList.splice(goodsList.length - num, num)
    }

    let str = ``
    goodsList.forEach((item, index) => {
        let itemStr = `<li>
        <div class='product' onclick = "toDetails(${item.id})">
            <img src="${item.image}" alt="">
            <div class = 'mesg'>
                <p class='title'>${item.title}</p>
                <div class="main">
                    <p>淘宝</p>
                    <span>包邮</span>
                </div>
                <div class="foot">
                    <div class="left">
                        <p class = 'price'>
                            <span class = 'f'>￥</span>${item.price}
                        </p>
                        <p class = 'num'>${item.saleNum}人已买</p>
                    </div>
                    <div class="right">
                        <p>${item.couponValue}</p>
                    </div>
                </div>
            </div>
        </div>
    </li>`
        str += itemStr
    })
    $('.goodsList').append(str)

    // 点击进入商品详情页面
    toDetails()
}

// 加载更多
function loadMore() {
    let pageNo = 0
    // 绑定加载更多事件
    $('.more').on('click', function () {
        pageNo++
        getProductMesg(pageNo)
    })
}

// 点击进入商品详情页面
function toDetails(id) {
    $('.product').on('click', function () {
        location.href = '../pages/details.html?id=' + id
    })
}

getProductMesg()
loadMore()